<template>
	<view class="main">
		<u-navbar title="个人认证" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#fff">
		</u-navbar>
		<view class="line">
			<text>真实姓名</text>
			<input type="text" placeholder="请输入真实姓名" v-model="state.name"/>
		</view>
		<view class="line" v-if="state.userInfo.authentication==2">
			<text>所属城市</text>
			<view class="rights" >
				<view v-if="state.area!=''">{{state.area}}</view>
			</view>
		</view>
		<view class="line" @click="state.show=true" v-else>
			<text>所属城市</text>
			<view class="rights" >
				<view v-if="state.area!=''">{{state.area}}</view>
				<!-- <input type="text" placeholder="请选择所在城市" disabled /> -->
				<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
			</view>
		</view>
		<view class="tit">
			上传身份证照片
		</view>
		<view class="card">
			<image src="../../static/me_rz_icon_sfz1@2x.png" mode="" v-if="state.idcard_front_image==''" @click="chooseImage(1)"></image>
			<image :src="state.idcard_front_image" mode="" v-else></image>
			<text>身份证人像面</text>
			<image src="../../static/me_rz_icon_sfz2@2x.png" mode="" v-if="state.idcared_opposite_image==''" @click="chooseImage(2)"></image>
			<image :src="state.idcared_opposite_image" mode="" v-else></image>
			<text>身份证国徽面</text>
		</view>
		<view class="button" style="background-color: #1BDDD0;" v-if="state.name==''&&state.userInfo.authentication!=2&&state.userInfo.authentication!=3"  @click="getTi()">
			提交认证
		</view>
		<view class="button" style="background-color: #1BDDD0;" v-else-if="state.userInfo.authentication!=2&&state.userInfo.authentication!=3" @click="getTi()">
			提交认证
		</view>
		<!-- 地图选择 -->
		<u-picker :show='state.show' :defaultIndex="[0]" @cancel="state.show=false" :columns="state.columns"
			@change="confirm" @confirm="isDz" keyName="name"></u-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {onLoad} from '@dcloudio/uni-app';
	onLoad((options) => {
		getAddress()
		getuserInfo()
	});
	const state = reactive({
		titleStyle: 'fontWeight:bold',
		level:1,
		pid:'',
		show:false,
		columns:[],
		name:'',//姓名
		idcard_front_image:'',//正面证件
		idcared_opposite_image:'',//反面证件
		province_id:'',//省id
		province_id:'',//省id
		city_id:'',//市id
		region_id:'',//区id
		area_id:'',
		province_name:'',//省name
		city_name:'',//市name
		address:'',//区name
	    area_ids:[],
		area:'',//省市区
		userInfo:{},
	})
	// 个人信息
	async function getuserInfo() {
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		   state.userInfo=data
		   if(data.authentication==2){
			   getAuthCon()
		   }
		}
	}
	// 认证消息authCon
	async function getAuthCon(){
		const {code,data} = await sheep.$api.user.authCon({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		   state.name=data.con.name
		   state.idcard_front_image=data.con.idcard_front_image
		   state.idcared_opposite_image=data.con.idcared_opposite_image
		   state.area=data.con.area
		}
	}
	// 提交认证
	async function getTi() {
		if (state.name == "") {
		  uni.showToast({
		    title: "请输入真实姓名",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.idcard_front_image == "") {
		  uni.showToast({
		    title: "请上传身份证正面",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.idcared_opposite_image == "") {
		  uni.showToast({
		    title: "请上传身份证反面",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.province_id == ""||state.city_id == "") {
		  uni.showToast({
		    title: "请选择所属城市",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		const areas=state.province_name+'-'+state.city_name+'-'+state.address
		const {code,data,msg} = await sheep.$api.user.createAuth({
			token:uni.getStorageSync('token'),
			type:1,
			name:state.name,
			area:areas,
			idcard_front_image:state.idcard_front_image,
			idcared_opposite_image:state.idcared_opposite_image,
			province_id:state.province_id,
			city_id:state.city_id,
			province_name:state.province_name,
			city_name:state.city_name,
			area_id:state.area_id
		})
		if (code == 1) {
		   uni.showToast({
		   	title: '提交成功',
		   	icon: "none",
		   	mask: true,
		   	duration: 2000
		   })
		}else{
			uni.showToast({
				title: msg,
				icon: "none",
				mask: true,
				duration: 2000
			})
		}
	}
	// 编辑认证提交
	async function getTis() {
		const areas=state.province_name+'-'+state.city_name+'-'+state.address
		const {code,data,msg} = await sheep.$api.user.cationEdit({
			token:uni.getStorageSync('token'),
			type:1,
			area:areas,
			name:state.name,
			idcard_front_image:state.idcard_front_image,
			idcared_opposite_image:state.idcared_opposite_image,
			province_id:state.province_id,
			city_id:state.city_id,
			province_name:state.province_name,
			city_name:state.city_name,
			area_id:state.area_id
		})
		if (code == 1) {
		   uni.showToast({
		   	title: '提交成功',
		   	icon: "none",
		   	mask: true,
		   	duration: 2000
		   })
		}else{
			uni.showToast({
				title: msg,
				icon: "none",
				mask: true,
				duration: 2000
			})
		}
	}
	//获取地区
	// function isDz(e){
	// 	state.province_id=e.value[e.indexs.length-3].id
	// 	state.city_id=e.value[e.indexs.length-2].id
	// 	state.region_id=e.value[e.indexs.length-1].id
	// 	state.area_ids[0]=e.value[e.indexs.length-3].id
	// 	state.area_ids[1]=e.value[e.indexs.length-2].id
	// 	state.area_ids[2]=e.value[e.indexs.length-1].id
	// 	state.province_name = e.value[e.indexs.length-3].name
	// 	state.city_name = e.value[e.indexs.length-2].name
	// 	state.address = e.value[e.indexs.length-1].name
	// 	var itemts = state.area_ids.join(",");
	// 	state.area_id = itemts
	// 	state.show =false
	// 	const areas=state.province_name+'-'+state.city_name+'-'+state.address
	// 	// state.areas=areas
	// 	state.area=areas
	// }
	function isDz(e) {
		let index1 = []
		for(let key in e.indexs){
			index1.push(e.indexs[key])
		}
		uni.setStorageSync('addressId', e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id)
		uni.setStorageSync('address', e.value[index1.length-1].name)
		state.area_id = e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id
		state.area = e.value[index1.length-1].name
		state.show = false
		getNews() //获取推荐
		newsDatas() //获取更多信息
	}
	
	function confirm(val){
		let data = state.columns[val.columnIndex][val.index]
		if(data.level=='1'){
			getAddress1(2,data.id,1)
		}
		// if(data.level=='2'){
		// 	getAddress2(3,data.id,1)
		// }
		
	}
	// 省
	async function getAddress(){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:1,
			pid:0
		})
		state.columns.push(data)
		getAddress1(2,data[0].id)
	}
	// 市
	async function getAddress1(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[1]=data
		}else{
			state.columns.push(data)
		}
		
		// getAddress2(3,data[0].id,type)
	}
	// 区
	async function getAddress2(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[2]=data
		}else{
			state.columns.push(data)
		}
	}
	
	// 上传图片
	function chooseImage(e){
		uni.chooseImage({
		    count:1, //默认9
		    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
		    sourceType: ["album", "camera"], //从相册选择
		    success: (res) => {
				// state.imagePath = res.tempFilePaths[0]	
				// state.preimagePath = res.tempFilePaths
		        uni.uploadFile({
		            url:'https://laiyu.1122334455.cn/api/common/upload', 
		            filePath: res.tempFilePaths[0],
		            name:'file',   
		            formData: {
		                token: uni.getStorageSync('token')
		            },
		            success:(res) => {
						var data = JSON.parse(res.data)
						if(e==1){
							if(data.code == 1){
								state.idcard_front_image=data.data.fullurl
							}
						}else{
							if(data.code == 1){
								state.idcared_opposite_image=data.data.fullurl
							}
						}
		            },
		            fail: (err) => {
		                console.log('uploadImage fail', err);
		            }
		        });
		    },
		});
	}
	
	
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f5f5f5;

		.main {
			background: #f5f5f5;
			width: 100%;
			// height: 100%;
			padding: 24rpx 0 40rpx;

			.line {
				display: flex;
				align-items: center;
				padding: 36rpx 32rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f5f5;

				// justify-content: space-between;
				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
                .rights{
					width: 83%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
				input {
					text-align: end;
					margin-left: auto;
				}

				image {
					height: 32rpx;
					width: 32rpx;
					margin-left: 8rpx;
				}
			}

			.tit {
				margin: 24rpx 32rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.card {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 0 48rpx 0;

				image {
					height: 280rpx;
					width: 440rpx;
					margin: 48rpx auto 24rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.button {
			    position: fixed;
				bottom:40rpx;
				left: 4%;
				width: 92%;
				box-sizing: border-box;
				text-align: center;
				line-height: 92rpx;
				height: 92rpx;
				border-radius: 54rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>